<template>
    <div class="body searchwrap mianshi">
        <!-- 排序按钮 -->
        <nav class="storenav p search_list_dump mianshinav">
            <ul>
                <div v-for="(itemr, i) in navCheckDowList" :key="i">
                    <li @click="navCheckClick(itemr)">
                        <span class="lb">{{ itemr.name }}</span>
                        <i
                            :class="{
                                pd: itemr.checkType == 0,
                                pc: itemr.checkType == 0 && itemr.ischeck,
                                pr: itemr.checkType == 1,
                                bpr1: itemr.checkType == 1 && itemr.ischeck,
                                fitter: itemr.checkType == 2,
                                listorimg: itemr.checkType == 3,
                            }"
                        ></i>
                    </li>
                    <div
                        class="shadow"
                        style="z-index: 99; top: 4rem"
                        v-if="itemr.ischeck && itemr.checkType == 0"
                        @click="itemr.ischeck = !itemr.ischeck"
                    ></div>

                    <div class="j_sel_option" v-show="itemr.ischeck">
                        <ul class="j_sel_optionul">
                            <li
                                :class="{
                                    j_sel_optionactive:
                                        itemr.checkName == item.nameli,
                                }"
                                v-for="(item, index) in itemr.checkList"
                                :key="index"
                                @click="changenavCheckFn(itemr, item)"
                            >
                                <span>{{ item.nameli }}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </ul>
        </nav>
        <!-- 下载列表 -->
        <div class="com_j5">
            <div
                class="j5_item"
                v-for="(item, index) in pageListInfo.comment_list"
                :key="index"
            >
                <div class="j5_t1 font15 substring">
                    <a>{{ item.fullname }}</a>
                    <div class="t_date font12">
                        {{ item.interview_addtime }}
                    </div>
                </div>
                <div class="j5_t2 font13 substring">
                    {{ new Date().getFullYear() - item.birthdate }}岁
                    {{ item.sex_cn }} | {{ item.experience_cn }} |
                    {{ item.education_cn }}
                </div>
                <div class="j5_bar J_interview_tip" vid="2">
                    <div
                        class="b_p font13 substring"
                        @click="
                            $router.push({
                                path: '/jobFindDetail',
                                query: { id: item.jobs_id },
                            })
                        "
                    >
                        面试职位：<a>{{ item.jobs_name }}</a>
                    </div>
                    <div class="b_p font13 substring">
                        面试日期：<a>{{ item.interview_time }}</a>
                    </div>
                    <div
                        class="b_tip"
                        @click="openDetail((checkData = item))"
                    ></div>
                </div>
            </div>

            <div class="split-block"></div>
        </div>
        <!-- 弹窗一 -->
        <van-popup v-model="idCheckOther" round closeable>
            <div class="qs-popout">
                <div class="qs-popout-hd">
                    <div class="qs-popout-title">面试邀请详情</div>
                </div>
                <div class="qs-popout-bd">
                    <div class="interview_details_pop_box">
                        <div class="detail_line font13">
                            <div class="line_left">面试职位：</div>
                            <div class="line_right">
                                <a class="a_black">{{ checkData.jobs_name }}</a>
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div class="detail_line font13">
                            <div class="line_left">面试人才：</div>
                            <div class="line_right">
                                <a class="a_blue">{{ checkData.fullname }}</a>
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div class="detail_line font13">
                            <div class="line_left">面试时间：</div>
                            <div class="line_right">
                                {{ checkData.interview_time }}
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div class="detail_line font13">
                            <div class="line_left">联系信息：</div>
                            <div class="line_right">
                                <a class="a_black">{{ checkData.telephone }}</a>
                                ({{ checkData.contact }})
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div class="detail_line font13">
                            <div class="line_left">面试地址：</div>
                            <div class="line_right">
                                {{ checkData.address }}
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div class="detail_line font13">
                            <div class="line_left">备注信息：</div>
                            <div class="line_right">
                                {{ checkData.notes ? checkData.notes : '无' }}
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </div>
                <div class="qs-popout-ft">
                    <a
                        class="qs-popout-btn qs-popout-btn-default"
                        style="display: none"
                        >取消</a
                    ><a
                        class="qs-popout-btn qs-popout-btn-primary"
                        @click="idCheckOther = !idCheckOther"
                        >知道了</a
                    >
                </div>
            </div>
        </van-popup>
        <!-- 分页 -->
        <component
            :is="'Pagination'"
            :pageInfo="pageInfo"
            @pageNext="pageNext"
            @changePageStatus="changePageStatus"
        ></component>
        <!-- 缺省页面 -->
        <component
            :is="'ContentNone'"
            v-if="pageListInfo.comment_list.length == 0 && pageInfo.pageSatus"
        ></component>
    </div>
</template>

<script>
import { axiosGet } from '../../axios';
import { Toast } from 'vant';
export default {
    name: '',
    data() {
        return {
            idCheckOther: false,
            navCheckDowList: [],
            checkData: {},

            checkInfo: [],

            pageListInfo: {
                comment_list: [],
            },
            // 分页组件信息
            pageInfo: {
                pagingText: '',
                pageNum: 1,
                pageSatus: true,
            },
        };
    },
    computed: {},
    mounted() {
        this.pageListInfo.comment_list = [];
        this.pageInfo.pageSatus = false;
        this.getList();
    },
    methods: {
        // 点击 nav 选项操作
        navCheckClick(itemr) {
            // 其他
            this.navCheckDowList = this.navCheckDowList.map((el) => {
                switch (el.checkType) {
                    case 0: // 没有子选项
                        if (!itemr.ischeck) {
                            el.ischeck = false;
                            if (el.name == itemr.name) {
                                el.ischeck = true;
                            }
                        } else {
                            el.ischeck = false;
                        }
                        break;
                    case 1:
                        if (el.name == itemr.name) {
                            el.ischeck = !el.ischeck;
                        }

                        break;
                    default:
                        break;
                }

                return el;
            });
        },
        // 导航子选项点击
        changenavCheckFn(itemr, item) {
            this.navCheckDowList = this.navCheckDowList.map((el) => {
                if (itemr.name == el.name) {
                    el.name = item.nameli;
                    el.checkName = item.nameli;
                    el.checkIndex = item.id;
                    el.ischeck = false;
                }
                this.checkInfo[el.id] = el.checkIndex;
                return el;
            });
            this.pageListInfo.comment_list = [];
            this.pageInfo.pageSatus = false;
            this.getList();
        },
        // 分页组件修改状态
        changePageStatus(data) {
            this.pageInfo.pageSatus = data;
        },
        // 分页组件回调
        pageNext(data) {
            this.pageInfo.pageNum = data;
            this.getList(data); // 根据type获取订单
        },
        // 处理选项数据
        computerCheckinfo(data) {
            this.navCheckDowList = [];
            let name = '';
            for (let i in data) {
                if (i === 'interview' || i === 'jobs_id') {
                    continue;
                }

                switch (i) {
                    case 'jobs_list':
                        name = '面试职位';
                        break;
                    case 'settr_arr':
                        name = '发送时间';
                        break;

                    default:
                        break;
                }

                let list = [];
                for (let j in data[i]) {
                    list.push({
                        id: j,
                        nameli: data[i][j],
                        name: data[i][j],
                    });
                }

                let item = {
                    id: i,
                    name: name,
                    checkName: '',
                    checkIndex: '',
                    checkType: 0,
                    ischeck: false,
                    checkList: list,
                };
                this.navCheckDowList.push(item);
            }
        },
        // 获取评价订单列表
        getList(page = 1, page_size = 10) {
            axiosGet(
                '/apis/company/jobs_interview_list',
                {
                    page: page,
                    page_size: page_size,
                    state: this.checkInfo['state_arr']
                        ? this.checkInfo['state_arr']
                        : '',
                    settr: this.checkInfo['settr_arr']
                        ? this.checkInfo['settr_arr']
                        : '',
                },
                (res) => {
                    // console.log(res);
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }
                    if (!this.pageListInfo.page) {
                        this.computerCheckinfo(res.data);
                    }

                    // 分页处理
                    if (
                        res.data.interview.page_params.nowPage ==
                        res.data.interview.page_params.totalPages
                    ) {
                        this.pageInfo.pagingText = '没有更多啦！';
                    } else {
                        this.pageInfo.pagingText = '商品加载中...';
                    }
                    this.pageInfo.pageSatus = true;

                    // 数据处理
                    for (let i in res.data.interview.list) {
                        let element = res.data.interview.list[i];
                        this.pageListInfo.comment_list.push(element);
                    }

                    this.pageListInfo.page = res.data.interview.page_params;
                }
            );
        },
        // 面试邀请详情
        openDetail() {
            this.idCheckOther = true;
        },
    },
};
</script>
<style lang="less" src="../../assets/css/jobCommon.less" scope></style>
<style lang="less" src="../../assets/css/selecttop.less" scope></style>
<style lang="less" scope>
.mianshi {
    .mianshinav {
        ul div li {
            width: 50%;
        }
    }
    .interview_details_pop_box {
        max-height: 12.8rem;
        background: #ffffff;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .interview_details_pop_box .detail_line {
        line-height: 1.5;
        margin-bottom: 0.32rem;
    }
    .interview_details_pop_box .detail_line .line_left {
        float: left;
        color: #999;
        text-align: right;
        width: 3.4133rem;
    }
    .interview_details_pop_box .detail_line .line_right {
        float: left;
        color: #333;
        word-break: break-all;
        width: 8.1067rem;
        text-align: left;
    }
    .interview_details_pop_box .detail_line .line_right .a_black {
        color: #333;
        text-decoration: none;
    }
    .interview_details_pop_box .detail_line .line_right .a_blue {
        color: #1887fb;
        text-decoration: none;
    }
    .com_j5 .j5_item {
        width: 100%;
        background: #ffffff;
        display: block;
        padding: 0.64rem 0.7467rem 0.64rem;
        text-decoration: none;
        margin-bottom: 0.2133rem;
    }
    .com_j5 .j5_item:last-child {
        border-bottom: 0;
    }
    .com_j5 .j5_item .j5_t1 {
        position: relative;
        width: 100%;
        padding-right: 3.6267rem;
        color: #666666;
    }
    .com_j5 .j5_item .j5_t1 a {
        color: #666666;
        text-decoration: none;
    }
    .com_j5 .j5_item .j5_t1 .t_right {
        position: absolute;
        right: 0;
        top: 50%;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
        color: #999999;
    }
    .com_j5 .j5_item .j5_t1 .t_date {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(0, -50%);
        color: #999999;
    }
    .com_j5 .j5_item .j5_t1 .txt_yellow {
        color: #ffaf24;
    }
    .com_j5 .j5_item .j5_t1 .txt_blue {
        color: #1787fb;
    }
    .com_j5 .j5_item .j5_t2 {
        position: relative;
        width: 100%;
        padding: 0.64rem 0;
        color: #666666;
    }
    .com_j5 .j5_item .j5_t2 .t_bt {
        position: absolute;
        right: 0;
        top: 50%;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
        color: #1787fb;
        padding: 0.1493rem 0.4267rem;
        border: 1px solid #1787fb;
        border-radius: 1.152rem;
    }
    .com_j5 .j5_item .j5_t2 .t_right {
        position: absolute;
        right: 0;
        top: 50%;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
        color: #999999;
    }
    .com_j5 .j5_item .j5_t3 {
        position: relative;
        width: 100%;
        color: #999999;
    }
    .com_j5 .j5_item .j5_bar {
        width: 14.2933rem;
        margin: 0 auto;
        border-radius: 4px;
        background: #f9f9f9;
        padding: 0.2133rem 2.4533rem 0.2133rem 0;
        position: relative;
    }
    .com_j5 .j5_item .j5_bar .b_p {
        padding: 0.2133rem 0 0.2133rem 0.64rem;
        color: #999;
        word-break: break-all;
    }
    .com_j5 .j5_item .j5_bar .b_p a {
        color: #333;
        text-decoration: none;
    }
    .com_j5 .j5_item .j5_bar .b_tip {
        position: absolute;
        right: 0;
        top: 0;
        width: 2.4533rem;
        height: 100%;
        background: url(../../assets/jobimg/new/interview_tip_bg.png) center
            center no-repeat;
        background-size: 0.9173rem;
    }
}
</style>
